import React from 'react'
import {Form,Input,Button} from "antd-mobile"
import request from "../../api/request";
import { useDispatch } from 'react-redux';
import { loginSuccess } from '../../store/user/userSlice';
import { useNavigate } from 'react-router-dom';

function Login() {
    const dispatch=useDispatch()
    const navigate=useNavigate();
    const onFinish=async(value)=>{
        console.log(value)
        const res=await request.post('/login',value)
        console.log(res);
        const {code,data,message}=res.data
        if(code==200){
            alert(message)
            dispatch(loginSuccess(data))
            //存token
            localStorage.setItem('token',res.data);
            //跳转到我的页面
            navigate('/my')
        }
        else{
            alert(message);
        }
    }
  return (
    <div>
        <h2 style={{textAlign:"center", lineHeight:"50px"}}>账号登录页</h2>
      <Form onFinish={onFinish} layout='horizontal' footer={
          <Button block type='submit' color='primary' size='large'>
            登录
          </Button>
        }>
        <Form.Item label="账号" name='username' rules={[{ required: true, message: '账号不能为空' }]}>
            <Input></Input>
        </Form.Item>

        <Form.Item label="密码" name='password' rules={[{ required: true, message: '密码不能为空' },{min:6,max:12,message:"至少6-12位密码"}]}>
            <Input></Input>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Login
